<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		
		<style>
			label{
				display: block;
				font-size: 14px;
				background-color: #ef5b00;
				color: white;
				height: 30px;
				line-height: 30px;
				text-align: left;
				display: block;
				cursor: pointer;
				width: 150px;
				font-family: "微软雅黑";
				/*去掉边框的关键代码*/
				border: 0 none;
				
				margin: 15px 0px;
			}
			
			label:hover{
				cursor: pointer;
			}
			
			#abc{
				
				width: 100px;
				height: 100px;
				line-height: 100px;
				background-color: green;
				color: white;
				font-size: 20px;
				text-align: center;
				
				border: 1px solid red;
			}
		</style>
	</head>
	<body>
		
		
		手机号码： <input type="text" name="phone" value="139" />
		
		
		
		<label id="sendPhone" >根据手机号码找人</label>
		
		<div id="abc">
			
		</div>
	</body>
	
	<script type="text/javascript" src="../../js/jquery-1.4.1.js" ></script>
	
	<script>
		
		//优化：增加注释
		$(function(){
			$('#sendPhone').click(function(){
				$('#abc').load('person.json',function(data){
					
					//把1个json格式的字符串转化为json对象
					var jsonData = eval( '(' + data + ')' );  
					
					console.log(jsonData.students.length);
					
					var students = jsonData.students;
					
					for(var index=0; index<students.length;index++){
						
						var emp = students[index];
						
						if(emp.phone == $('input[name="phone"]').val()){
							
							$('#abc').text(emp.name);
							
						}
						
					}
				});
			});
		});
		
		
	</script>
</html>
